import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: AnimatedFractionallyDemo());
  }
}

// 高级用法示例
class AnimatedFractionallyDemo extends StatefulWidget {
  const AnimatedFractionallyDemo({super.key});

  @override
  State<AnimatedFractionallyDemo> createState() =>
      _AnimatedFractionallyDemoState();
}

class _AnimatedFractionallyDemoState extends State<AnimatedFractionallyDemo> {
  bool showFirst = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              alignment: Alignment.centerLeft,
              //动画版本的比例尺寸盒子
              child: AnimatedFractionallySizedBox(
                //宽度占比  父布局
                widthFactor: 0.8,
                //高度占比
                heightFactor: 0.9,
                duration: Duration(seconds: 1),
                child: Container(color: Colors.red),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.change_circle_outlined),
        onPressed: () {
          setState(() {
            showFirst = !showFirst;
          });
        },
      ),
    );
  }
}
